<template>
  <div class="panel-collapse">
    <div class="flex justify-between">
      <a-space>
        <icon-develop-ai-outline style="color: rgb(var(--primary-6))" :size="16" />
        <span>意见建议</span>
      </a-space>
      <a-link v-if="inputList.list.length > 1 || outputList.list.length > 1" @click="handleCollapsed">
        查看更多
      </a-link>
    </div>
    <div class="panel-collapse-content">
      <div v-if="!inputList?.list?.length && !outputList?.list?.length">暂无</div>
      <div v-else>
        <div><strong>{{ inputList.label }}: </strong></div>
        <div v-if="inputList.list.length > 0">1、{{ inputList.list[0] }}</div>
        <div v-else>暂无</div>
        <div class="mt-2"><strong>{{ outputList.label }}: </strong></div>
        <div v-if="outputList.list.length > 0">1、{{ outputList.list[0] }}</div>
        <div v-else>暂无</div>
      </div>
    </div>
    <a-drawer :width="688" v-model:visible="visible" :footer="false" title="智能建议">
      <div class="mb-2 mt-2"><strong>{{ inputList.label }}建议: </strong></div>
      <div v-if="inputList.list.length > 0">
        <div v-for="(item, index) in inputList.list" :key="index">{{ index + 1}}、{{ item }}</div>
      </div>
      <div v-else>暂无</div>
      <div class="mb-2 mt-2"><strong>{{ outputList.label }}建议: </strong></div>
      <div v-if="outputList.list.length > 0">
        <div v-for="(item, index) in outputList.list" :key="index">{{ index + 1}}、{{ item }}</div>
      </div>
      <div v-else>暂无</div>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref } from "vue";

defineProps({
  inputList: {
    default: () => ({ list: [] }),
    type: Object
  },
  outputList: {
    default: () => ({ list: [] }),
    type: Object
  }
});

const visible = ref(false);

function handleCollapsed() {
  visible.value = true
}
</script>

<style lang="less">
.panel-collapse-content {
  margin-left: 24px;
  margin-top: 12px;
  line-height: 20px;
  letter-spacing: 0em;
  color: var(--color-text-2);
}
.arrow {
  transition: transform .2s cubic-bezier(.34, .69, .1, 1);
  &.collapsed {
    transform: rotate(180deg);
  }
}
.panel-collapse {
  background: rgb(var(--primary-1));
  border-radius: 4px;
  padding: 8px 12px;
}
</style>

